<template>
    <div>
        <a-modal :title="'作品编辑'" :visible="visible" :confirm-loading="confirmLoading" @ok="handleOk"
            @cancel="handleCancel1">
            <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
                <a-form-model-item label="选择系列">
                    <a-select show-search :default-active-first-option="false" :show-arrow="false"
                        :filter-option="false" :not-found-content="null" @search="seriesSearch"
                        :placeholder="form.seriesName ? form.seriesName : '请选择或输入关键字'" @change="selectSeries">
                        <a-select-option :value="item._id" v-for="(item, index) in sList" :key="index">
                            {{ item.title }}
                        </a-select-option>
                    </a-select>
                </a-form-model-item>
                <a-form-model-item label="集数">
                    <a-input v-model="form.episodes" />
                </a-form-model-item>
                <a-form-model-item label="描述">
                    <a-input v-model="form.detail" />
                </a-form-model-item>
                <a-form-model-item label="视频">

                    <a-upload :data="imgData" :file-list="fileList" action="https://up-z2.qiniup.com/"
                        @change="handleChange" @preview="previewFile">
                        <a-button> <a-icon type="upload" /> 上传 </a-button>
                    </a-upload>


                </a-form-model-item>
            </a-form-model>
        </a-modal>
    </div>
</template>
<script>

import axios from 'axios'
import { getSeriesList, addVideoList, modifyVideo, } from "../../http/api"
export default {
    name: "userEdit",
    data () {
        return {
            visible: this.flag,
            confirmLoading: false,
            labelCol: { span: 4 },
            wrapperCol: { span: 16 },
            typeOptions: [],
            form: {
                _id: '',
                videoUrl: '',
                episodes: '',
                seriesId: '',
                seriesName: '',
                detail: ''

            },
            shopType: '',
            previewVisible: false,
            previewImage: '',
            fileList: [],
            imgData: {},


            editType: 1, //1是新增 2是编辑

            bList: [],
            sList: [],
            gList: [],
            userInfo: {}
        }
    },
    props: ["flag", "list"],
    created () {
        // console.log(this.list)
        this.userInfo = JSON.parse(localStorage.getItem('userInfo'))
        if (this.list._id) {
            this.form = {
                _id: this.list._id,
                videoUrl: this.list.videoUrl,
                episodes: this.list.chapter,
                seriesId: this.list.seriesId,
                detail: this.list.detail,
                seriesName: this.list.seriesName,
            }

            this.editType = 2
            this.fileList = [{
                uid: -1,
                name: this.list.videoUrl,
                status: 'done',
                url: this.list.videoUrl,
            }]
        } else {
            this.editType = 1
        }
        this.imgData.token = this.list.imgToken
        this.shopType = this.$store.state.user.shopId
        // if (this.shopType == '000') {
        //   this.bossList(1, this.$store.state.user.shopId)
        // }
        this.getSeriesList()
    },
    methods: {
        handleChange (info) {
            let fileList = [...info.fileList]

            // 1. Limit the number of uploaded files
            //    Only to show two recent uploaded files, and old ones will be replaced by the new
            fileList = fileList.slice(-2)

            // 2. read from response and show file link
            fileList = fileList.map(file => {
                if (file.response) {
                    // Component will show file.url as link
                    file.url = file.response.url
                }
                return file
            })

            this.fileList = fileList
        },



        //系列选择
        selectSeries (e) {
            console.log(e)
            //根据_id查找系列名seriesName
            // 使用 find 方法查询
            const item = this.sList.find(item => item._id === e)
            this.form.seriesId = e
            this.form.seriesName = item.title
        },
        //系列搜索
        seriesSearch (e) {
            console.log(e)

            this.getSeriesList(e)
        },
        //商品图片
        imgCancel () {
            this.previewVisible = false
        },

        //预览视频
        previewFile (file) {
            console.log('Your upload file:', file)

        },

        //确认
        handleOk (e) {
            console.log(this.form)
            console.log(this.fileList)
            if (this.fileList.length == 0 || this.form.seriesName == '' || this.form.detail == '' || this.form.episodes == '' || this.form.seriesId == '') {
                this.$tishi("warning", '请完善信息')
                return
            }




            this.confirmLoading = true
            // console.log(this.form)
            if (this.editType == 2) {
                //修改数据
                this.modifyVideo()
            } else {
                //新增数据
                this.addVideoList()
            }
        },
        //点击取消 关闭弹框赋值
        handleCancel1 (e) {
            console.log("Clicked cancel button")
            this.visible = false
            this.$emit("func", this.visible)
        },
        //点击确定 关闭弹框赋值
        closefz () {
            this.visible = false
            this.confirmLoading = false
            this.$emit("func", this.visible)
        },
        async addVideoList () {
            //判断视频是否上传完成
            if (!this.fileList[0].response) {
                this.$tishi("warning", '请等待视频上传完成')
                this.confirmLoading = false
                return
            }
            const parameter = {
                "$url": "addVideoList",
                "videoUrl": 'https://animationvideo.syhqcm.fun/an' + this.fileList[0].response.key + 'video.mp4'
                ,
                "seriesID": this.form.seriesId,
                "seriesName": this.form.seriesName,
                "chapter": this.form.episodes,
                "author": this.userInfo.name,
                "authorID": this.userInfo._id,
                "detail": this.form.detail

            }
            var res = await addVideoList(parameter)
            console.log('新增视频数据', res)
            if (res.code == 200) {
                this.$tishi("success", res.msg)
                this.closefz()
            } else {
                this.$tishi("warning", res.msg)
                this.confirmLoading = false
            }
        },
        //视频数据修改
        async modifyVideo () {
            //判断是否修改了视频
            let videoUrl = ''
            if (this.fileList[0].url) {
                videoUrl = this.fileList[0].url
            } else {
                //判断视频是否上传完成
                if (!this.fileList[0].response) {
                    this.$tishi("warning", '请等待视频上传完成')
                    this.confirmLoading = false
                    return
                }
                videoUrl = 'https://animationvideo.syhqcm.fun/an' + this.fileList[0].response.key + 'video.mp4'
            }
            const parameter = {
                "$url": "modifyVideo",
                "seriesID": this.form.seriesId,
                "seriesName": this.form.seriesName,
                "chapter": this.form.episodes,
                "detail": this.form.detail,
                "videoUrl": videoUrl,
                "_id": this.form._id,
            }
            var res = await modifyVideo(parameter)
            console.log('修改系列', res)
            if (res.code == 200) {
                this.$tishi("success", res.msg)
                this.closefz()

            } else {
                this.$tishi("warning", res.msg)
                this.confirmLoading = false
            }
        },

        //系列列表
        async getSeriesList (keyword) {
            const parameter = {
                "$url": "getSeriesSearch",
                "keyword": keyword,
                "authorID": this.userInfo._id,
            }
            const res = await getSeriesList(parameter)
            console.log('系列列表', res)
            var d = res.res
            this.sList = d.data
        },
    },
}
</script>

<style scoped>
.ant-upload-select-picture-card i {
    font-size: 32px;
    color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
    margin-top: 8px;
    color: #666;
}
</style>